<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		<link type="text/css" rel="stylesheet" href="css/style.css">
		<script type='text/javascript' src="js/vue.js"></script>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.login_form {
				height: 360px;
			}
			.backlogin{
				float: right;
				margin-left: 120px;
			}
			a{
				margin-left: 60px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="login_form">
				<div class="login_box">
					<div class="tit">
						<h1 id="h1_msg">学生注册</h1>
						<a href="login.html">返回登录</a>
					</div>
					<div class="msg_cont">
						<span id="errorMsg"></span>
					</div>
					<div class="form">
						<form>
							<label>用户名称：</label>
							<input class="itxt" type="text" v-model="username" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" id="username" />
							<br />
							<br />
							<label>用户密码：</label>
							<input class="itxt" type="password" v-model="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" id="password" />
							<br />
							<br />
							<label>确认密码：</label>
							<input class="itxt" type="password"  placeholder="确认密码" autocomplete="off" tabindex="1" name="repwd" id="repwd" />
							<br />
							<br />
							<input type="hidden" id="regist_type" value="1"/>
							<input type="button" @click="getData" value="注册" id="sub_btn" />
							<br />
						</form>
					</div>
					<div>
						<a id="teacher" @click="stu_regist">学生注册>></a>
						<a id="admin" @click="tea_regist">教师注册>></a>
					</div>
				</div>
			</div>
		</div>

	</body>
	<script>
				new Vue({
					el:'#app',
					data:{
							username:'',
							password:'',
					},
					methods:{
						getData:function(){
							if(this.username!=''){
								var id_regiet_type = document.getElementById('regist_type').value
								axios
								.get('http://localhost:8080/adduser',{
									params:{
										username: this.username,
										password: this.password,
										user_type: id_regiet_type
									}
								})
								.then(res => {
									console.log(res)
									if(res.data=="add_ok"){
										alert("注册成功")
									}else if(res.data=="add_no"){
										document.getElementById('errorMsg').innerText="添加失败"
									}else if(res.data=="user_exist"){
										document.getElementById('errorMsg').innerText="用户已存在"
									}
								})
								.catch(res => alert(res))					 							
							}else{
								document.getElementById('errorMsg').innerHTML="请输入账号"
							}
						},
						stu_regist:function(){
							document.getElementById('h1_msg').innerHTML="学生注册"
							document.getElementById('regist_type').value="1"
						},
						tea_regist:function(){
							document.getElementById('h1_msg').innerHTML="教师注册"
							document.getElementById('regist_type').value="2"
						}
						
					}
				})
	</script>
</html>
